<template>
	<a-radio-group v-model:value='value' :size='size' @change='onChange' :button-style='buttonStyle'>
		<a-radio-button v-if="mode==='button'"  v-for='(v,i) of ajax.data' :value='v[idStr]'>{{v[nameStr]}}</a-radio-button>
		<a-radio v-else v-for='(v,i) of ajax.data' :value='v[idStr]'>{{v[nameStr]}}</a-radio>
	</a-radio-group>
</template>

<script>
	import { ref, watch } from 'vue'
	import { Radio } from 'ant-design-vue'
	app.use(Radio)
		
	const boolData = [
		{ label:'是', value: 1 },
		{ label:'否', value: 0 }
	]
	
	export default{
		props:{
			value 		: [String, Number],
			name 		: String,
			label 		: String,
			form 		: Object,
			size		: String,
			mode		: String,
			data		: { type:Array, default: boolData },
			buttonStyle	: { type:String, default: 'solid' },
			api 		: String,
			idStr 		: { type: String, default: $config.idStr },
			nameStr 	: { type: String, default: $config.nameStr },
			cache 		: Boolean
		},
		emits:{
			change: null,
			'update:value': null,
			init: null
		},
		setup(props, ctx){
			const ajax = ref({ data: props.data })
			$fn.ajax({ ajax, ctx, ...props })
			
			watch(()=>props.data, value => ajax.value.data = value )
			
			return {
				onChange: e => {
					const value = e.target.value
					ctx.emit('update:value', value)
					ctx.emit('change', $fn.getFormFormat({...props, formType:'radio', data:ajax.value.data }) )
				},
				ajax
			}
		}
	}
</script>